<template>
  <div class="account-settings">
    <div class="page-header">
      <h2>账号设置</h2>
    </div>

    <a-row :gutter="16">
      <a-col :span="16">
        <!-- 通知设置 -->
        <a-card class="settings-card">
          <template #title>通知设置</template>
          <a-form :model="notificationSettings" layout="vertical">
            <div class="settings-group">
              <div class="group-title">订单通知</div>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item field="newOrder">
                    <template #label>
                      <div class="setting-label">
                        <span>新订单提醒</span>
                        <a-tag>推荐</a-tag>
                      </div>
                    </template>
                    <a-switch v-model="notificationSettings.newOrder" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item field="orderCancel">
                    <template #label>
                      <span>订单取消提醒</span>
                    </template>
                    <a-switch v-model="notificationSettings.orderCancel" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item field="orderRefund">
                    <template #label>
                      <span>退款申请提醒</span>
                    </template>
                    <a-switch v-model="notificationSettings.orderRefund" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item field="orderDelivery">
                    <template #label>
                      <span>发货提醒</span>
                    </template>
                    <a-switch v-model="notificationSettings.orderDelivery" />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>

            <div class="settings-group">
              <div class="group-title">商品通知</div>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item field="stockWarning">
                    <template #label>
                      <div class="setting-label">
                        <span>库存预警</span>
                        <a-tag>推荐</a-tag>
                      </div>
                    </template>
                    <a-switch v-model="notificationSettings.stockWarning" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item field="priceChange">
                    <template #label>
                      <span>价格变动提醒</span>
                    </template>
                    <a-switch v-model="notificationSettings.priceChange" />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>

            <div class="settings-group">
              <div class="group-title">评价通知</div>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item field="newComment">
                    <template #label>
                      <span>新评价提醒</span>
                    </template>
                    <a-switch v-model="notificationSettings.newComment" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item field="badComment">
                    <template #label>
                      <div class="setting-label">
                        <span>差评提醒</span>
                        <a-tag>推荐</a-tag>
                      </div>
                    </template>
                    <a-switch v-model="notificationSettings.badComment" />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>

            <a-divider />

            <div class="settings-group">
              <div class="group-title">通知方式</div>
              <a-space direction="vertical" :style="{ width: '100%' }">
                <a-checkbox-group v-model="notificationSettings.methods">
                  <a-checkbox value="site">站内消息</a-checkbox>
                  <a-checkbox value="sms">短信通知</a-checkbox>
                  <a-checkbox value="email">邮件通知</a-checkbox>
                  <a-checkbox value="wechat">微信通知</a-checkbox>
                </a-checkbox-group>
              </a-space>
            </div>

            <a-form-item>
              <a-button type="primary" @click="handleSaveNotifications">
                保存设置
              </a-button>
            </a-form-item>
          </a-form>
        </a-card>

        <!-- 隐私设置 -->
        <a-card class="settings-card">
          <template #title>隐私设置</template>
          <a-form :model="privacySettings" layout="vertical">
            <a-form-item field="showRealName">
              <template #label>
                <span>展示真实姓名</span>
              </template>
              <template #extra> 选择是否在店铺页面显示商家真实姓名 </template>
              <a-switch v-model="privacySettings.showRealName" />
            </a-form-item>

            <a-form-item field="showPhone">
              <template #label>
                <span>展示联系电话</span>
              </template>
              <template #extra> 选择是否在店铺页面显示联系电话 </template>
              <a-switch v-model="privacySettings.showPhone" />
            </a-form-item>

            <a-form-item field="allowMessage">
              <template #label>
                <span>允许私信</span>
              </template>
              <template #extra> 是否允许买家通过私信联系商家 </template>
              <a-switch v-model="privacySettings.allowMessage" />
            </a-form-item>

            <a-form-item>
              <a-button type="primary" @click="handleSavePrivacy">
                保存设置
              </a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>

      <a-col :span="8">
        <!-- 账号注销 -->
        <a-card class="settings-card danger-zone">
          <template #title>
            <span class="danger-title">账号注销</span>
          </template>
          <div class="danger-content">
            <p class="warning-text">
              注销账号将永久删除您的所有数据，包括但不限于：
            </p>
            <ul class="warning-list">
              <li>店铺信息和商品数据</li>
              <li>订单记录和交易数据</li>
              <li>评价信息和互动记录</li>
              <li>账户余额和财务记录</li>
            </ul>
            <p class="warning-text">注销后将无法恢复，请谨慎操作</p>
            <div class="danger-actions">
              <a-button status="danger" @click="handleDeactivate">
                申请注销账号
              </a-button>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 注销确认弹窗 -->
    <a-modal
      v-model:visible="showDeactivateModal"
      title="账号注销确认"
      @ok="handleDeactivateConfirm"
      @cancel="closeDeactivateModal"
      :ok-button-props="{ status: 'danger' }"
    >
      <a-form :model="deactivateForm" layout="vertical">
        <a-alert type="warning" class="mb-4">
          <template #title> 注销账号将无法恢复，请再次确认 </template>
        </a-alert>
        <a-form-item
          field="password"
          label="请输入登录密码"
          :rules="[{ required: true, message: '请输入登录密码' }]"
        >
          <a-input-password
            v-model="deactivateForm.password"
            placeholder="请输入登录密码"
          />
        </a-form-item>
        <a-form-item
          field="reason"
          label="注销原因"
          :rules="[{ required: true, message: '请选择注销原因' }]"
        >
          <a-select
            v-model="deactivateForm.reason"
            placeholder="请选择注销原因"
          >
            <a-option value="1">不再经营</a-option>
            <a-option value="2">平台使用体验不佳</a-option>
            <a-option value="3">更换平台</a-option>
            <a-option value="4">其他原因</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          v-if="deactivateForm.reason === '4'"
          field="otherReason"
          label="其他原因说明"
        >
          <a-textarea
            v-model="deactivateForm.otherReason"
            placeholder="请说明具体原因"
          />
        </a-form-item>
        <a-form-item>
          <a-checkbox v-model="deactivateForm.confirm">
            我已知晓账号注销的所有影响，并确认要注销账号
          </a-checkbox>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { Message } from "@arco-design/web-vue";

// 通知设置
const notificationSettings = reactive({
  newOrder: true,
  orderCancel: true,
  orderRefund: true,
  orderDelivery: true,
  stockWarning: true,
  priceChange: false,
  newComment: true,
  badComment: true,
  methods: ["site", "sms"],
});

// 隐私设置
const privacySettings = reactive({
  showRealName: false,
  showPhone: true,
  allowMessage: true,
});

// 注销相关
const showDeactivateModal = ref(false);
const deactivateForm = reactive({
  password: "",
  reason: "",
  otherReason: "",
  confirm: false,
});

// 方法
const handleSaveNotifications = () => {
  // 实现保存通知设置逻辑
  Message.success("通知设置已保存");
};

const handleSavePrivacy = () => {
  // 实现保存隐私设置逻辑
  Message.success("隐私设置已保存");
};

const handleDeactivate = () => {
  showDeactivateModal.value = true;
};

const handleDeactivateConfirm = () => {
  if (!deactivateForm.confirm) {
    Message.error("请确认注销声明");
    return;
  }
  // 实现账号注销逻辑
  Message.success("注销申请已提交，请等待审核");
  closeDeactivateModal();
};

const closeDeactivateModal = () => {
  showDeactivateModal.value = false;
  Object.assign(deactivateForm, {
    password: "",
    reason: "",
    otherReason: "",
    confirm: false,
  });
};
</script>

<style lang="scss" scoped>
.account-settings {
  padding: 24px;

  .page-header {
    @apply mb-6;

    h2 {
      @apply text-xl font-medium m-0;
    }
  }

  .settings-card {
    @apply mb-6;

    .settings-group {
      @apply mb-6;

      .group-title {
        @apply text-base font-medium mb-4;
      }

      .setting-label {
        @apply flex items-center gap-2;

        .arco-tag {
          @apply text-xs;
        }
      }
    }
  }

  .danger-zone {
    .danger-title {
      @apply text-red-500;
    }

    .danger-content {
      .warning-text {
        @apply text-gray-600 mb-4;
      }

      .warning-list {
        @apply list-disc list-inside text-gray-600 mb-4;
      }

      .danger-actions {
        @apply mt-6 text-center;
      }
    }
  }
}
</style>
